import { history } from 'umi';
import bgImage from '@/assets/p2/background2.png'; //背景图片
import '@/pages/p2/gamepage.css'
import Dialog from "@/components/Dialog"; //对话组件
import dialogImage from "@/assets/p1/dialog_background_red.png";
import TreasureBox from "@/components/TreasureBox"; //百宝袋组件
import AchievementList from "@/components/AchievementList"; //成就组件

import people1 from '@/assets/p2/people1.png';
import people4 from '@/assets/p2/people4.png';
import { useState } from 'react';
import Character from "@/components/Character"; //角色组件
import characterImage from "@/assets/p1/characters/protagonist.png";
import front1 from "@/assets/p1/front1.png";
import front2 from "@/assets/p1/front2.png";
import front3 from "@/assets/p1/front3.png";
import back1 from "@/assets/p1/back1.PNG";
import back2 from "@/assets/p1/back2.PNG";
import back3 from "@/assets/p1/back3.PNG";
import left1 from "@/assets/p1/left1.png";
import left2 from "@/assets/p1/left2.png";
import left3 from "@/assets/p1/left3.png";
import right1 from "@/assets/p1/right1.png";
import right2 from "@/assets/p1/right2.png";
import right3 from "@/assets/p1/right3.png";

const junshu = () => {

    const [introduction, setIntroduction] = useState(false);

    const dialogues = [
        "要开始修建沟渠了，人怎么也凑不齐，小兄弟你能帮我们更好的进行人员的分配吗，要做到各地平均不偏不倚哦。",
        "放心，交给我吧！",
        ""
    ];

    const screenWidth = window.innerWidth;
	const screenHeight = window.innerHeight;
    const [renX, setRenX] = useState(0.62 * screenWidth);
	const [renY, setRenY] = useState(0.43 * screenHeight);
    const [characterPosition, setCharacterPosition] = useState({
		x: renX,
		y: renY,
	});
	const characterImages = {
		front: [front1, front2, front3, front2],
		left: [left1, left2, left3, left2],
		right: [right1, right2, right3, right2],
        back: [back1, back2, back3, back2]
	};
	const handlePositionChange = newPosition => {
		setCharacterPosition(newPosition);
	};

    const tiaozhuan = () => {
        history.push('/p2/huanfang')
    }
    const chengjiu = () => {

    }

    return(
        <div className='game-page' style={{ backgroundImage: `url(${bgImage})` }}>
            <TreasureBox itemId={4}/>
            <AchievementList achievementId={7} handleClick={chengjiu}/>
            {(!introduction) && 
            (<Dialog
            backgroundImage={dialogImage} dialogues={dialogues}
            triggerIndexEvents={[2]}
            eventHandlers={[
                () => {
                    setIntroduction(true);
                }
            ]}
            dialogueImages={[{rightImage:people4}, {leftImage:people1}]}>
            </Dialog>)}
            <Character
				characterImage={characterImage}
				characterImages={characterImages}
				canMove={true}
				initPositionX={renX}
				initPositionY={renY}
				onPositionChange={handlePositionChange}
				ifProtagonist="true"
			/>
            {
                introduction && 
                (<div id='hfjs' onClick={tiaozhuan}>
                    “幻方游戏”
                    <br />
                    幻方是一种中国传统游戏。旧时在官府、学堂多见。它是将若干自然数排成纵横各为若干个数的正方形，使在同一行、同一列和同一对角线上的几个数的和都相等。和数独差不多。玩家将合适的数字填入方格中填写正确即可通关
                </div>)
            }
        </div>
    );
}

export default junshu;